<template>
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable"
                      :data="list"
                      style="width: 100%;"
                      v-loading="listLoading" border>
                <el-table-column label="编号" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.id}}</template>
                </el-table-column>
                <el-table-column label="帐号ID" align="center">
                    <template slot-scope="scope">{{scope.row.adminId}}</template>
                </el-table-column>
                <el-table-column label="登录IP" align="center">
                    <template slot-scope="scope">{{scope.row.ip}}</template>
                </el-table-column>
                <el-table-column label="浏览器" align="center">
                    <template slot-scope="scope">{{scope.row.userAgent}}</template>
                </el-table-column>
                <el-table-column label="登录时间" width="160" align="center">
                    <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10,15,20]"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {fetchList} from '../../../api/loginlog';
    import {formatDate} from '../../../utils/date';

    const defaultListQuery = {
        pageNum: 1,
        pageSize: 10
    };
    const defaultAdmin = {
        id: null,
        username: null,
        password: null,
        nickName: null,
        email: null,
        note: null,
        status: 1
    };
    export default {
        name: 'adminList',
        data() {
            return {
                listQuery: Object.assign({}, defaultListQuery),
                list: null,
                total: null,
                listLoading: false,
                dialogVisible: false,
                admin: Object.assign({}, defaultAdmin),
                isEdit: false,
                allocDialogVisible: false,
                allocRoleIds:[],
                allRoleList:[],
                allocAdminId:null
            }
        },
        created() {
            this.getList();
        },
        filters: {
            formatDateTime(time) {
                if (time == null || time === '') {
                    return 'N/A';
                }
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            }
        },
        methods: {
            getList(){
                fetchList(this.listQuery).then(res => {
                    this.list = res.data;
                    this.total = res.total;
                    console.log(res)
                })
            },
            handleSizeChange(val) {
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
        }
    }
</script>
<style></style>


